<template>
	<view class="wrap">
		<view class="title">
			<view class="bg"></view>
			<view class="title_txt" :style="{ top: CustomBar + 'px' }">
				{{ title }}
			</view>
			<image v-if="title !== '完善个人资料'" class="back_img" src="@/static/image/fanhui.png" mode=""
				:style="{ top: CustomBar + 'px' }" @tap="backClick"></image>
			<view class="title_info">
				<view class="item">
					<view> 头像 </view>
					<view>
						<image v-if="form.avatar" class="img" :src="form.avatar" mode=""></image>
						<button v-else class="img_btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
							<image class="img" src="@/static/image/tx.png"></image>
						</button>
					</view>
				</view>
				<view class="item">
					<view> 姓名 </view>
					<view>
						<input class="inp" v-model="form.realName" type="text" placeholder="请输入姓名" />
					</view>
				</view>
				<view class="item">
					<view> 性别 </view>
					<view>
						<picker @change="pickSex" :value="form.sex" :range="columns">
							<view>
								{{ form.sex == "" ? "请选择性别" : form.sex }}
							</view>
						</picker>
					</view>
				</view>
				<view class="item">
					<view> 电话 </view>
					<view>
						<input class="inp" v-model="form.username" maxlength="11" type="number" placeholder="请输入电话" />
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="btn" @tap="saveClick"> 保 存 </view> -->
	</view>
</template>

<script>
import { myUser, updateUser } from "@/api/data.js";
export default {
	data() {
		return {
			title: "个人资料",
			columns: ["男", "女"],
			form: {
				realName: "",
				phone: "",
				avatar: "",
				sex: "",
				username: ''
			},
			CustomBar: 0,
			type: "",
		};
	},
	onLoad(e) {
		wx.showShareMenu({
			withShareTicket: true,
			menus: ["shareAppMessage", "shareTimeline"],
		});
		wx.getSystemInfo({
			success: (res) => {
				let h = wx.getMenuButtonBoundingClientRect();
				this.CustomBar = h.top;
			},
		});
		this.myUser()
	},
	methods: {
		myUser() {
			myUser().then((res) => {
				console.log('res', res);
				this.form = res.data;
			});
		},
		backClick() {
			uni.navigateBack({
				delta: 1,
			});
		},

		pickSex(e) {
			this.form.sex = e.target.value == "0" ? "男" : "女";
		},
		saveClick() {
			uni.showLoading({
				title: "请求中...",
			});
			if (this.form.avatar === "") {
				uni.$u.toast("请上传头像");
				return;
			}
			if (
				this.form.realName === "" ||
				this.form.sex === "" ||
				this.form.username === ""
			) {
				uni.$u.toast("请完善个人信息");
				return;
			}
			updateUser(this.form).then((res) => {
				if (res.code == 200) {
					uni.$u.toast("保存成功");
				}
			});
		},
	},
};
</script>

<style scoped lang="less">
.wrap {
	width: 750upx;
	min-height: 100vh;
	background: #f4f4f4;
	position: relative;
}

.title {
	width: 750upx;
	height: 1160upx;
	position: absolute;
}

.bg {
	width: 750upx;
	height: 370upx;
	background: #ffcf60;
	border-bottom-right-radius: 100upx;
	border-bottom-left-radius: 100upx;
}

.title_txt {
	width: 750upx;
	height: 32px;
	line-height: 32px;
	color: #fff;
	letter-spacing: 2upx;
	text-align: center;
	position: absolute;
}

.back_img {
	width: 40upx;
	height: 40upx;
	margin-top: 10upx;
	position: absolute;
	left: 20upx;
}

.title_info {
	width: 510upx;
	height: 960upx;
	padding: 0 80upx;
	background: #ffffff;
	border-radius: 16upx;
	position: absolute;
	left: 40upx;
	bottom: 0;
}

.item {
	width: 510upx;
	padding: 30upx 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 28upx;
	color: #999;
	border-bottom: 2upx solid #eee;
}

.img_btn {
	width: 120upx;
	height: 120upx;
	padding: 0 !important;
	border-radius: 120upx;
}

.img {
	width: 120upx;
	height: 120upx;
	border-radius: 120upx;
}

.inp {
	width: 300upx;
	text-align: right;
}

.btn {
	width: 400upx;
	line-height: 80upx;
	text-align: center;
	border-radius: 12upx;
	position: absolute;
	bottom: 80upx;
	left: 175upx;
	background: linear-gradient(to right, #00e7a1, #08b1d2);
	color: #fff;
}

.sel_wrap {
	width: 750upx;
	height: 100vh;
	background: rgba(0, 0, 0, 0.2);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	display: flex;
	align-items: flex-end;

	.sel_cen {
		width: 686upx;
		padding: 20upx 32upx;
		background: #fff;
		border-top-left-radius: 16upx;
		border-top-right-radius: 16upx;

		.sel_inp_wrap {
			display: flex;
			align-items: center;

			.sel_inp {
				width: 500upx;
				padding: 16upx 20upx;
				margin-right: 20upx;
				border: 1upx solid #e4e9ef;
				border-radius: 8upx;
			}

			.sel_btn {
				padding: 18upx 30upx;
				background: #08b1d2;
				border-radius: 8upx;
				color: #fff;
			}
		}

		.sel_list {
			width: 686upx;
			height: 600upx;
			padding: 20upx 0;

			.sel_item {
				width: 100%;
				padding: 20upx 0;
				border-bottom: 1upx solid #eee;
				display: flex;
				align-items: center;
				justify-content: space-between;

				image {
					width: 40upx;
					height: 40upx;
				}

				.sel_name {
					width: 550upx;
					font-size: 28upx;
				}
			}
		}
	}
}
</style>
